<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox" class="container">
    <h1>企业工单管理系统</h1>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>工单编号</th>
        <th>项目名称</th>
        <th>执行人</th>
        <th>任务描述</th>
        <th>级别</th>
        <th>创建时间</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in workList">
        <td>{{item.id}}</td>
        <td>
          <p v-for="i in proList">
            <span v-if="item.projectid==i.id">{{i.projectname}}</span>
          </p>
         </td>
        <td>{{item.executor}}</td>
        <td>{{item.description}}</td>
        <td>
          <span v-if="item.orderlevel==1">一级</span>
          <span v-if="item.orderlevel==2">2级</span>
          <span v-if="item.orderlevel==3">3级</span>
        </td>
        <td>{{item.createdate}}</td>
      </tr>
      <tr>
        <p v-if="workList.list!=undefined && workList.list.length<=0">没有查到数据</p>
      </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
             workList:{},
             proList:{}
            },
            methods:{

            },
            mounted(){
               axios.get("/seleWork").then(res=>{
                   this.workList=res.data;
               }),
                   axios.get("/selePro").then(res=>{
                       this.proList=res.data;
                   })
            }
    })
</script>